<template>
  <el-menu
    text-color="#fff"
    active-text-color="#ffd04b"
    background-color="#545c64"
    router
    default-active="1-4-1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
  >
    <h3>{{ isCollapse ? "后台" : "蔬菜大棚系统" }}</h3>
    <el-menu-item v-for="item in menu" :key="item.path" :index="item.path">
      <i :class="'el-icon-' + item.icon"></i>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          path: "/check",
          name: "check",
          label: "实时数据",
          icon: "location-information",
          url: "Check/Check",
        },
        {
          path: "/history",
          name: "history",
          label: "历史数据",
          icon: "lightning",
          url: "History/History",
        },
        {
          path: "/pred",
          name: "pred",
          label: "预测",
          icon: "data-line",
          url: "Pred/Pred",
        },
        {
          path: "/charts",
          name: "charts",
          label: "继电器状态",
          icon: "set-up",
          url: "Charts/Charts",
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  computed: {
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 170px;
  min-height: 400px;
}
.el-menu {
  height: 100%;
  border: none;
  h3 {
    color: #fff;
    text-align: center;
  }
}
</style>